<template>
  <el-dialog
    v-model="dialogVisible"
    title="个人信息"
    width="500px"
    :before-close="handleClose"
  >
    <div v-loading="loading" class="user-profile">
      <div v-if="userInfo" class="profile-content">
        <div class="avatar-section">
          <el-avatar 
            :src="userInfo.avatar" 
            :size="80"
            class="user-avatar"
          >
            {{ userInfo.username?.charAt(0) }}
          </el-avatar>
        </div>
        
        <div class="info-section">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户ID">
              {{ userInfo.id }}
            </el-descriptions-item>
            <el-descriptions-item label="用户名">
              {{ userInfo.username }}
            </el-descriptions-item>
            <el-descriptions-item label="角色">
              <el-tag v-if="userInfo.role === 0" type="danger">管理员</el-tag>
              <el-tag v-else type="info">普通用户</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag v-if="userInfo.status === 1" type="success">启用</el-tag>
              <el-tag v-else type="danger">停用</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ userInfo.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ userInfo.updateTime }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useUserStore } from '../stores/user'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible'])

// 对话框显示状态
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const userStore = useUserStore()
const loading = ref(false)

// 用户信息
const userInfo = computed(() => userStore.userInfo)

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.user-profile {
  min-height: 200px;
}

.profile-content {
  padding: 20px 0;
}

.avatar-section {
  text-align: center;
  margin-bottom: 30px;
}

.user-avatar {
  font-size: 32px;
  font-weight: 600;
}

.info-section {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-descriptions__label) {
  width: 100px;
  font-weight: 600;
}

:deep(.el-descriptions__content) {
  word-break: break-word;
}
</style>
